<template>
  <div class="app-container">

    <!-- 查询和其他操作 -->
    <div class="filter-container">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">

        <el-date-picker v-model="formInline.registeDate" class="filter-item"
                        :editable="false" :clearable="true" :placeholder="$t('选择日期')"  format="yyyy 年 MM 月 dd 日"
                        value-format="yyyy-MM-dd"></el-date-picker>


        <el-input v-model="formInline.userName" clearable class="filter-item" style="width: 200px;" :placeholder="$t('请填写用户名称')"/>

          <el-input v-model="formInline.email" clearable class="filter-item" style="width: 200px;" :placeholder="$t('请填写邮箱')"/>

        <el-button class="filter-item" type="info" plain1 icon="el-icon-search" :v-permission="['GET /admin/p/reward_distribution_log_index']" @click="getList">{{$t('Search')}}</el-button>

      </el-form>
    </div>

    <!-- 查询结果 -->
    <el-table  :data="list" :element-loading-text="$t('Searching')" border fit
              highlight-current-row>
      <el-table-column align="center" type="index" :label='$t("序号")' :index="getIndex" width="50"></el-table-column>
      <el-table-column align="center" :label='$t("姓名")' prop="userName"/>
      <el-table-column align="center" :label='$t("邮箱")' prop="email"/>
      <el-table-column align="center" :label="$t('奖励方式')" prop="taxTotalAmount">
        <template slot-scope="scope">
          {{scope.row.type == 1 ? "邀请" : scope.row.type == 2 ? "邀请并注册" : "注册并消费"}}
        </template>
      </el-table-column>
      <el-table-column align="center" :label='$t("注册日期")' prop="registeDate"/>
      <el-table-column align="center" :label='$t("推广次数")' prop="inviteNum"/>
      <el-table-column align="center" :label='$t("获得奖励")' prop="rewardNum"/>

      <el-table-column align="center" :label="$t('Operate')" width="250" class-name="small-padding fixed-width">
        <template slot="header" slot-scope="{row}">
          {{ $t('Operate') }}
          <i class="el-icon-setting" style="color: #d35e32"></i>
        </template>
        <template slot-scope="scope">
          <el-link type="primary" icon="el-icon-view" @click="handleDetail(scope.row)">{{$t("查看明细")}}</el-link>
        </template>
      </el-table-column>
    </el-table>

    <el-drawer
      :title='$t("我是标题")'
      :visible.sync="drawer"
      :with-header="false" style="line-height: 83px;margin:10px 20px 20px 20px"
      @closed="clearActivities">
      <div class="radio">
        <el-button  target="_blank">{{$t('用户：')}}{{ TipsName }}</el-button>
      </div>

      <el-timeline :reverse="reverse" >
        <el-timeline-item
            v-for="(activity, index) in activities"
            :key="index">
          <el-card>
            <p>{{activity.timestamp}}</p>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </el-drawer>
    <pagination v-show="total>0" :total="total" :page.sync="formInline.page" :limit.sync="formInline.limit"
                @pagination="getList"/>

    <el-tooltip placement="top" :content="$t('Back_to_top')">
      <back-to-top :visibility-height="100"/>
    </el-tooltip>
  </div>
</template>
<script>
import ElSelectDropdown from 'element-ui/packages/select/src/select-dropdown'
import BackToTop from '@/components/BackToTop'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import { levelMemberList, levelupdateStatus, levelMemberDelete } from '@/api/user'
import { detailByLog, logReward } from '../../api/distribution'

export default {
  name: 'detailed',
  components: { ElSelectDropdown, BackToTop, Pagination },
  data() {
    const typeMap = ['', this.$t('全场通用')]
    return {
      reverse: true,
      activities: [],
      drawer: false,
      TipsName: this.$t('小帅'),

      value1: '',
      formInline: {
        registeDate: undefined,
        page: 1,
        limit: 20,
        sort: 'add_time',
        order: 'desc',
        userName: undefined,
        email: undefined,
      },
      typeMap,
      list: [],
      total: 0,
      listLoading: true,
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.listLoading = true
      logReward(this.formInline).then(res => {
        this.list = res.data.data.list
        this.total = res.data.data.total
        this.listLoading = true
      }).catch(() => {
        this.list = []
        this.total = 0
        this.listLoading = false
      })
    },
    clearActivities(){
      this.activities.pop()
    },
    doDelete(row) {
      var memberId = row.id
      levelMemberDelete(memberId).then(response => {
        this.$notify.success({
          title: this.$t('Success!'),
          message: this.$t('Deleted')
        })
        const index = this.list.indexOf(row)
        this.list.splice(index, 1)
      }).catch(response => {
        this.$notify.error({
          title: this.$t('Failed'),
          message: this.$t(response.data.errmsg)
        })
      })
    },


    handleSearch(){
      this.getList()
    },

    handleDetail(row) {//跳转详情
      detailByLog(row.id).then(response => {
        this.activities= [];
        var list = response.data.data.list;
        for (let i = 0; i < list.length; i++) {
           var content = '';
           content += list[i].registerName + this.$t("成功注册后，获得了")
           if(list[i].couponName != '' && list[i].couponName != undefined){
             content +=this.$t("优惠券") + "("+ list[i].couponName + "),"
           }

           if(list[i].points != undefined && list[i].points != null){
             content += this.$t("积分")+ list[i].points+ ","
           }

            content += this.$t("注册日期是")+ row.registeDate
           this.activities.push({timestamp: content})
        }
      })
      this.TipsName = row.userName
      this.drawer = true
    },
    // 更改状态
    updateStatus(row) {

      console.log('更改状态', row)
      // return

    },

    getIndex(index) {
      // console.log(index)

        return (index + 1) + (this.formInline.page - 1) * this.formInline.limit

    }
  }
}
</script>

<style scoped>
.radio{
  text-align: center;
}
</style>
